<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/jquery.js"></script>
    <script>
        // ajax事件
        1.xhr.timeout = 函数    // 超时触发
        2.xhr.onload = 函数     // 请求成功触发
        3.xhr.onerror = 函数    // 请求失败时触发
        4.xhr.upload.onloadstart    //开始上传时触发
        5.xhr.upload.onloadend  //上传结束时触发
        6.xhr.upload.onprogress //上传数据时,周期性触发



        // ajax超时处理 timeout
        // level2新特性，在open之前设定！
        let xhr = new XMLHttpRequest(); // 创建
        xhr.timeout = 1000;     //  设定超时限定时间
        xhr.ontimeout = function () {   // 处理超时设置
            alert('请求超时，请检查网络，重新发送请求！');
        }
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.response);
            }
        }


        // ajax请求成功触发 load
        let xhr = new XMLHttpRequest(); // 创建
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/getbooks');
        xhr.send();
        xhr.onload = function () {// 新增事件，替代原有的 onreadystatechange  xhr.readyState==4 && xhr.statue == 200 省略了
            console.log(xhr.response);
        }
        xhr.onerror = function () {// 请求错误的时候触发 - 网络不通畅，会触发 onerror  （了解）
            alert('请求出现错误，请检查网络！');
        }





        // 表单对象操作
        let form = document.querySelector('form')
        form.onsubmit = function (e) {
            e.preventDefault()  // 阻止表单跳转
            // let fd = new FormData(form)
            // ...可以拆解
            // console.log(...fd);


            let fd2 = new FormData();
            // 添加，修改，获取
            fd2.append('email', 'lvchao@itcast.cn'); // 只需要掌握 append();
            fd2.set('address', '三里屯');
            console.log(fd2.get('address'));
            // 利用扩展运算符，拆解后输出
            console.log(...fd2);
        }



        // 上传文件
        // FormData不需要设置请求头
        需要    JSON.parse(xhr.response)




        // jQuery
        // 在jQuery需要将contentType processData 设置为 false
        // 区分大小写，false不能带引号，不需要设置 Content-Type: 默认值了；
        contentType: false
        // 区分大小写，false不能带引号，参数不需要编码！
        processData: false




        // h5新增的进度条标签
        // < progress max = "200" value = "0" ></ progress >
        形参.total     // 文件总大小
        形参.loaded    // 已经上传的数据大小

        上传文件jQuery需要自己定义方法
        xhr: function () {
            // 获取xhr
            // let xhr = new XMLHttpRequest(); // 创建新xhr
            let xhr = $.ajaxSettings.xhr(); // 获取内置的xhr
            // 回归到原生js
            xhr.upload.onprogress = function (e) {
                $('progress').attr('max', e.total);
                $('progress').attr('value', e.loaded);
            }
            // 进度条能做，显示隐藏留作业！
            // 注意!!!!!!!!!!!
            return xhr;
        }





        // 同步异步
        1.js代码开始执行后，主线程执行栈中会把任务分为两类
        2.一类是同步任务, 一类是异步任务; 主线程执行栈优先执行同步任务，
        3.异步任务会被放入特定的处理程序中，满足条件后，被放到消息(任务 / 事件)队列中，
        4.主线程执行栈中所有的同步任务执行完毕之后，通过事件循环去消息(任务 / 事件)队列中，
        5.挑选优先满足条件的程序，放入主线程执行栈中执行。事件循环，周而复始，一直执行。











        let btn = document.querySelector('button')
        btn.onclick = function () {
            // // 发送简单GET
            let url = 'http://www.liulongbin.top:3006/api/getbooks'
            axios.get(url, {
                params: { bookname: '天行健' }
            }).then(function (res) {
                console.log(res.data.data);
            })






            // // 发送简单POST  不一样的数据类型，设置不一样的头信息
            //FormData对象需要设置      content-type: multypart/form-data
            //非form设置      content-type: application/x-www-form-urlencoded;
            let url = 'http://www.liulongbin.top:3006/api/addbook'
            let data = 'bookname=天行健&author=燕垒生&publisher=出版社出版社'
            axios.post(url, data).then(function (res) {
                console.log(res);
            })





            // // 发送GET
            axios({
                methor: 'get',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                params: { bookname: '天行健' }
            }).then(function (res) {
                alert(res.data.msg)
                console.log(res.data.data[0]);
            }).catch(function (res) {
                alert('获取失败')
            })



            // axios
            // 发送POST
            then()处理请求发送后接收到的数据
            catch ()处理无法发送引起的报错
            axios({
                method: 'post',
                url: 'http://www.liulongbin.top:3006/api/addbook',
                data: {
                    bookname: '天行健',
                    author: '燕垒生',
                    publisher: '出版社出版社'
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.status < 400 & res.request.readystate == 4) {
                    return alert(res.data.msg);
                }
                alert(res.data.msg);
            }).catch(function (err) {
                alert('添加失败')
            })
        }
    </script>
</body>

</html>